<template>
	<el-row>
		<el-col>
			<el-form :inline="true" :model="formInline" size="small">
				<el-form-item label="服务名称">
					<el-input v-model="formInline.value1" style="width: 215px" placeholder="服务名称"></el-input>
				</el-form-item>
				<el-form-item label="服务类型">
					<el-select v-model="formInline.value2" placeholder="服务类型" @change="change2">
						<el-option label="全部" value="全部"></el-option>
						<el-option label="在线地图" value="在线地图"></el-option>
						<el-option label="专题地图" value="在线地图"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="纠错状态">
					<el-select v-model="formInline.value3" placeholder="纠错状态" @change="change3">
						<el-option label="全部" value="全部"></el-option>
						<el-option label="未处理" value="未处理"></el-option>
						<el-option label="已回复" value="已回复"></el-option>
						<el-option label="已完成" value="已完成"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="申请时间">
					<el-date-picker v-model="formInline.value5" type="daterange" align="right" unlink-panels
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
						:picker-options="pickerOptions">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="select()">查询</el-button>
					<el-button type="success" @click="clear()">清除</el-button>
				</el-form-item>
			</el-form>
			<!--       -->
			<vxe-table :data="tableData">
				<vxe-column type="seq" width="60"></vxe-column>
				<vxe-column field="serviceName" title="服务名称"></vxe-column>
				<vxe-column field="serviceType" title="服务类型"></vxe-column>
				<vxe-column field="corrector" title="纠错人"></vxe-column>
				<vxe-column field="plottText" title="错误描述"></vxe-column>
				<vxe-column field="state" title="状态"></vxe-column>
				<vxe-column sortable field="errorDate" title="申请时间"></vxe-column>
				<vxe-column title="操作" width="200px">
					<template #default="{ row }">
						<el-button type="text" @click="detailed(row)">详情</el-button>
						<el-button type="text" style="color: #fd3e3e" @click="black(row)">回复</el-button>
						<el-button type="text" style="color: #fd3e3e" @click="finish(row)">完成</el-button>
					</template>
				</vxe-column>
			</vxe-table>
			<!--      <vxe-pager
          :current-page.sync="page.currentPage"
          :page-size.sync="page.pageSize"
          :total="page.totalResult"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']">
      </vxe-pager> -->
		</el-col>
	</el-row>
</template>

<script>
	import pickerShortcut from "@/mixins/picker-shortcut";
	import $axios from "@/network";

	/**
	 *{ 纠错记录列表 }
	 * @param:
	 * @author: 宋康
	 * @DateTime: 2022/7/9
	 */
	export default {
		name: "ErrorList",
		mixins: [pickerShortcut],
		data() {
			return {
				formInline: {
					value1: '',
					value2: '',
					value3: '',
					value4: '',
					value5: '',
				},
				tableData: [],
				page: {
					currentPage: 1,
					pageSize: 5,
					totalResult: 10
				},
			}
		},
		mounted() {
			this.getErrorAll();
		},
		methods: {
			change2(v) {
				this.formInline.value2 = v;
			},
			change3(v) {
				this.formInline.value3 = v;
			},
			select() {
				this.getErrorAll();
			},
			clear() {
				this.formInline.value1 = "";
				this.formInline.value2 = "";
				this.formInline.value3 = "";
				this.getErrorAll();
			},
			getErrorAll() {
				this.tableData = [];
				$axios({
					url: "/online/errorCorrection/getErrorCorrectionAll",
				}).then(res => {
					for (let i = 0; i < res.data.length; i++) {
						if ((this.formInline.value1 == res.data[i].serviceName || this.formInline.value1 == "") &&
							(this.formInline.value2 == res.data[i].serviceType || this.formInline.value2 == "" ||
								this.formInline.value3 == "全部") &&
							(this.formInline.value3 == res.data[i].state || this.formInline.value3 == "" || this
								.formInline.value3 == "全部")
						) {
							if (res.data[i].person == this.$store.state.Authentication.virtualName ||
                  res.data[i].personId == this.$store.state.Authentication.uid) {
								this.tableData.push(res.data[i]);
							}
						}
					}
          this.tableData.reverse();
				})
			},
			black(row) {
				$axios({
					method: "POST",
					url: "/online/errorCorrection/updateErrorCorrection",
					data: {
						id: row.id,
						state: "已回复"
					}
				}).then(res => {
					this.getErrorAll();
				})
			},
			finish(row) {
				$axios({
					method: "POST",
					url: "/online/errorCorrection/updateErrorCorrection",
					data: {
						id: row.id,
						state: "已完成"
					}
				}).then(res => {
					this.getErrorAll();
				})
			},
			/**
			 *{ 详情 }
			 * @param:
			 * @author: 宋康
			 * @DateTime: 2022/7/9
			 */
			detailed(row) {
				this.$router.push({
					name: 'ErrorDetailed',
					query: {
						id: row.id
					}
				})
			},
			/**
			 *{ 删除 }
			 * @param:
			 * @author: 宋康
			 * @DateTime: 2022/7/9
			 */
			del(row) {
				this.$confirm(`此操作将永久删除该纠错, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!' + row.value1
					});
				});
			}
		}
	}
</script>

<style scoped>

</style>
